<template>
  <!-- 使用teleport传送门挂载组件,挂载在id值为back的元素上 -->
  <teleport to="#back">
    <!-- background-color属性值在vue中通过backgroundColor表示 -->
    <van-overlay :show="true">
      <div class="wrapper" @click.stop>
        <van-loading size="34px" type="spinner" vertical>加载中...</van-loading>
      </div>
    </van-overlay>
  </teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import useDOMCreate from '@/hooks/useDOMCreate'

export default defineComponent({
  name: 'Loader',
  props: {
    text: {
      type: String
    },
    background: {
      type: String
    }
  },
  setup() {
    // 创建teleport组件挂载的节点
    useDOMCreate('back')
  }
})
</script>

<style>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  /* background-color: #fff; */
}
/* 设置div的遮罩层的样式*/
.loading-container {
  background: rgba(255, 255, 255, 0.5);
  /* z轴方向显示的优先级 */
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
}
.loading-container {
  text-align: center;
}
</style>
